<template>
  <van-popup class="van-popup" :overlay="false" :show="loading">
    <div class="icon">
      <slot name="icon">
        <div :class="[ 'iconfont', icon ]"></div>
      </slot>
    </div>
    <div class="text">
      <slot name="text">{{ text }}</slot>
    </div>
  </van-popup>
</template>

<script setup>
import { watch } from 'vue';
const props = defineProps({
  loading: { type: Boolean, default: false },
  delay: { type: Number, default: 1500 },
  icon: { type: String, default: 'icon-wushuju' },
  text: { type: String, default: '暂无题目' }
})

const emit = defineEmits(['close'])

watch(() => props.loading, (val) => {
  if(val) {
    const t = setTimeout(() => {
      clearTimeout(t);
      emit('close');
    }, props.delay);
  }
})
</script>

<style lang="scss" scoped>
.van-popup {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 64px;
  border-radius: 1rem;
  background: rgb(0, 0, 0, .7);

  .icon {
    .iconfont {
      color: #fff;
      font-size: 4rem;
    }
  }

  .text {
    margin-top: 1rem;
    color: #fff;
    font-size: 1.6rem;
  }
}

</style>